<style>
    .img{
        width:40px;
        height:60px;
        margin-left:10px;
        margin-right:10px;
        margin-top:10px;
        margin-bottom:10px;
    }
    .img:hover{border:1px solid red}
</style>
<!--<script>
    !function(){
        laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
        laydate({elem: '#demo'});//绑定元素
    }();
</script>-->
<div class="box border blue">
    <div class="box-body big" ng-show="addOrPreview==0">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-md-3 control-label" for="name">名称</label>
                <div class="col-md-9">
                    <input id="name" class="form-control" ng-model="newEvent.name" placeholder="必填"/>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="agenda">议程</label>
                <div class="col-md-9">
                    <input id="agenda" class="form-control" ng-model="newEvent.agenda"/>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="address">地址</label>
                <div class="col-md-9">
                    <input id="address" class="form-control" ng-model="newEvent.address" placeholder="必填"/>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="startTime">开始时间</label>
                <div class="col-md-9">
                    <input id="startTime" type="datetime-local" ng-model="newEvent.startTime" placeholder="IE/FireFox用户请填写形如1970-01-01T00:00:00的时间格式" class="form-control">
                    <!--<input id="startTime" ng-model="newEvent.startTime" placeholder="必填" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">-->
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="endTime">结束时间</label>
                <div class="col-md-9">
                    <input id="endTime" type="datetime-local" ng-model="newEvent.endTime" placeholder="IE/FireFox用户请填写形如1970-01-01T00:00:00的时间格式" class="form-control">
                    <!--<input id="endTime" ng-model="newEvent.endTime" placeholder="必填" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">-->
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="limitNumber">人数限制</label>
                <div class="col-md-9">
                    <input id="limitNumber" class="form-control" ng-model="newEvent.limitNumber"/>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="prerequisite">先决条件</label>
                <div class="col-md-9">
                    <input id="prerequisite" class="form-control" ng-model="newEvent.prerequisite"/>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="dressCode">着装要求</label>
                <div class="col-md-9">
                    <select id="dressCode" class="form-control" ng-model="newEvent.dressCode">
                        <option value="CASUAL">休闲</option>
                        <option value="BUSINESS_CASUAL">商务休闲</option>
                        <option value="BUSINESS_FORMAL">商务正装</option>
                    </select>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="status">状态</label>
                <div class="col-md-9">
                    <select id="status" class="form-control" ng-model="newEvent.status">
                        <option value="DRAFT">草稿</option>
                        <option value="CONFIRM">确认</option>
                        <option value="CANCEL">取消</option>
                        <option value="CLOSED">关闭</option>
                    </select>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="type">类型</label>
                <div class="col-md-9">
                    <select id="type" class="form-control" ng-model="newEvent.type">
                        <option value="CEREMONY">典礼</option>
                        <option value="MEETING">会议</option>
                        <option value="DINNER">聚餐</option>
                        <option value="SPORTS">体育</option>
                        <option value="ART">艺术</option>
                        <option value="PARTY">派对</option>
                        <option value="TRAINING">培训</option>
                        <option value="OUTING">户外运动</option>
                        <option value="SEMINAR">研讨会</option>
                        <option value="RELEASE">发布会</option>
                        <option value="CONCALL">电话会议</option>
                        <option value="TOURS">旅行</option>
                        <option value="OTHERS">其他</option>
                    </select>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="stationeryUrl">信纸选择</label>
                <div class="col-md-9">
                    <!--<select>
                        <option value="http://www.diamondtiming.com:8080/uploads/20160806151603_xinzhi1.jpg">
                            <img src="http://www.diamondtiming.com:8080/uploads/20160806151603_xinzhi1.jpg" style="width:20px;height:40px">
                        </option>
                    </select>-->
                    <input ng-model="newEvent.stationeryUrl" readonly="readonly" id="stationeryUrl" class="form-control"/>
                    <ul class="nav nav-tabs">
                        <li class="{{stationeryState==1?'active':''}}" ng-click="stationerySelect(1)">
                            <span style="text-align: center">
                                <img src="http://www.diamondtiming.com:8080/uploads/20160809131748_xin0.jpg" class="img">
                                <p>信纸1</p>
                            </span>
                        </li>
                        &nbsp;&nbsp;
                        <li class="{{stationeryState==2?'active':''}}" ng-click="stationerySelect(2)">
                            <span style="text-align: center">
                            <img src="http://www.diamondtiming.com:8080/uploads/20160809131803_xin1.jpg" class="img"/>
                            <p>信纸2</p>
                            </span>
                        </li>
                        &nbsp;&nbsp;
                        <li class="{{stationeryState==3?'active':''}}" ng-click="stationerySelect(3)">
                            <span style="text-align: center">
                            <img src="http://www.diamondtiming.com:8080/uploads/20160809131809_xin2.jpg" class="img"/>
                            <p>信纸3</p>
                            </span>
                        </li>
                        &nbsp;&nbsp;
                        <li class="{{stationeryState==4?'active':''}}" ng-click="stationerySelect(4)">
                            <span style="text-align: center">
                            <img src="http://www.diamondtiming.com:8080/uploads/20160809131815_xin3.jpg" class="img"/>
                            <p>信纸4</p>
                            </span>
                        </li>
                        &nbsp;&nbsp;
                        <li class="{{stationeryState==5?'active':''}}" ng-click="stationerySelect(5)">
                            <span style="text-align: center">
                            <img src="http://www.diamondtiming.com:8080/uploads/20160809131823_xin4.jpg" class="img"/>
                            <p>信纸5</p>
                            </span>
                        </li>
                    </ul>
                </div>
                <br/><br/>
                <label class="col-md-3 control-label" for="memberInvite">人员邀请</label>
                <div class="col-md-9">
                    <input id="memberInvite" ng-model="contactNameList" readonly="readonly" class="form-control" ng-click="choseContact()"/>
                </div>
                <br/><br/>
            </div>
        </form>
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-1"><button class="btn btn-success" ng-click="perviewInvitation()">预览</button></div>
            <div class="col-md-1"><button class="btn btn-success" ng-click="resetMessage()">撤销</button></div>
            <div class="col-md-1"><button class="btn btn-success" ng-click="eventSubmit()">提交</button></div>
        </div>
    </div>
    <div ng-show="addOrPreview==1">
        <div class="row">
            <div class="col-md-3">
            </div>
            <div class="col-md-6">
                <div class="box-body big" id="invationContent" ng-style="invationStyle">
                    <div class="text-center" style="font-size:30px">诚挚邀请您参加我们的</div>
                    <div class="text-center" style="font-size:40px"><p>{{newEvent.name}}</p></div>
                    <div class="text-center" style="font-size:30px"><p>邀请者：{{presentAccountInfo.firstName}}</p></div>
                    <div class="text-center" style="font-size:30px"><p>{{newEvent.startTime|date:"yyyy-MM-dd"}}</p></div>
                    <div class="text-center" style="font-size:30px"><p>{{newEvent.startTime|date:"HH:mm"}} 至 {{newEvent.endTime|date:"HH:mm"}}</p></div>
                </div>
                <div class="center"><button class="btn btn-success" ng-click="continueEdit()">返回继续编辑</button></div>
            </div>
        </div>
    </div>
</div>